<template>
  <div class="app-container">
    <!-- 表格-条件筛区域  -->
    <div class="filter-container">
      <el-input
        v-model="searchParam.SEARCH_LIKE_good_name"
        placeholder="请输入关键字"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        @click="handlePayMoney"
      >支付金额排序</el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        @click="handleSales"
      >销量排序</el-button>
      <el-button
        v-permission="['goods:add']"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >新增
      </el-button>
      <div
        style="float: right;margin-right: 20px;font-size: 15px;font-weight: bold"
      >
        经营商品总数量:{{ goodsCount }}
      </div>
    </div>

    <!-- 表格-内容区域 -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align ? column.align : 'center'"
        :min-width="column.minWidth"
        :sortable="column.sortable"
        :fixed="column.fixed"
        :type="column.type"
        :formatter="column.formatter"
      >
        <template slot-scope="scope">
          <img
            v-if="column.imgFlag == true"
            :src="scope.row[column.prop]"
            width="60"
            height="60"
            class="img"
          >
          <!-- 行内显示开关按钮 -->
          <el-switch
            v-else-if="
              column.switchFlag == true && column.prop === 'state'
            "
            v-model="scope.row[column.prop]"
            class="tableScopeSwitch"
            :active-value="1"
            :inactive-value="0"
            active-text="上架"
            inactive-text="下架"
            @change="
              handleGoodsStateChange(scope.$index, scope.row)
            "
          />
          <el-switch
            v-else-if="
              column.switchFlag == true && column.prop != 'state'
            "
            v-model="scope.row[column.prop]"
            :active-value="1"
            :inactive-value="0"
            disabled=""
          />
          <span v-else-if="column.formatter">
            {{ column.formatter(scope.row) }}</span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="250"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              v-permission="['goods:edit']"
              type="primary"
              icon="el-icon-edit-outline"
              circle
              @click="handleUpdate(scope.row)"
            />
          </el-tooltip>
          <!--          <el-tooltip content="参数设置" placement="top">-->
          <!--            <el-button type="success" icon="el-icon-s-operation" circle @click="goodsParamsSet(scope.row)"/>-->
          <!--          </el-tooltip>-->
          <el-tooltip content="规格设置" placement="top">
            <el-button
              v-permission="['goods:sku']"
              type="success"
              icon="el-icon-s-operation"
              circle
              @click="goodsAttrSet(scope.row)"
            />
          </el-tooltip>
          <el-tooltip content="库存设置" placement="top">
            <el-button
              v-permission="['goods:stock']"
              type="success"
              icon="el-icon-s-operation"
              circle
              @click="goodsStockSet(scope.row)"
            />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              v-permission="['goods:delete']"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.row)"
            />
          </el-tooltip>
          <el-tooltip content="评论列表" placement="top">
            <el-button
              v-permission="['goods:comment']"
              type="success"
              icon="el-icon-s-operation"
              circle
              @click="commentList(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格-页脚区域 -->
    <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      :page.sync="pageRequest.pageNum"
      :limit.sync="pageRequest.pageSize"
      @pagination="getList"
    />

    <!--新增编辑界面-->
    <el-dialog
      v-if="dialogFormVisible"
      :title="operation ? '新增' : '编辑'"
      top="-1vh"
      width="1250px"
      :visible.sync="dialogFormVisible"
      :modal="false"
      :close-on-click-modal="false"
    >
      <div style="height:600px;overflow-y: scroll;">
        <el-form
          ref="dataForm"
          :model="dataForm"
          label-width="140px"
          :rules="dataFormRules"
          style="width: 95%"
        >
          <el-form-item label="商品名称" prop="goodName">
            <el-input
              v-model="dataForm.goodName"
              auto-complete="off"
              oninput="if(value.length > 35)value = value.slice(0, 35)"
            />
          </el-form-item>
          <el-form-item label="商品分类" prop="classifyId">
            <el-cascader
              ref="classCascader"
              v-model="dataForm.classifyId"
              :options="goodClass"
              :props="props"
              collapse-tags
              clearable
              separator=" "
              @change="handleFilterChangeType"
            />
          </el-form-item>
          <!--<el-form-item label="运费形式" prop="feeType">
                      <el-radio v-model="dataForm.feeType" label="0">固定运费</el-radio>
                      <el-radio v-model="dataForm.feeType" label="1">运费模版</el-radio>
                    </el-form-item>
                    <el-form-item v-if="dataForm.feeType==='0'" label="运费" prop="code">
                      <el-input-number v-model="dataForm.fee" :min="0" :max="1000"/>
                    </el-form-item>
                    <el-form-item v-if="dataForm.feeType==='1'" label="运费模版" prop="code">
                      <el-select v-model="dataForm.feeFormworkId" filterable placeholder="请选择">
                        <el-option
                          v-for="item in feeTemplateList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>-->
          <el-form-item label="商品编码" prop="code">
            <el-input v-model="dataForm.code" auto-complete="off" />
          </el-form-item>
          <el-form-item label="图片路径" prop="imgUrl">
            <cm-upload
              v-model="dataForm.imgUrl"
              :path="'goods'"
              :limit="1"
              :value="dataForm.imgUrl"
            />
          </el-form-item>
          <el-form-item label="图片轮播图" prop="imgArr">
            <c-m-upload-more
              v-if="dialogFormVisible"
              v-model="dataForm.imgArr"
              :file-list="dataForm.imgArr"
            />
            <!--                        <cm-upload v-model="dataForm.imgArr" :file-list="dataForm.imgArr" v-if="dialogFormVisible"></cm-upload>-->
          </el-form-item>
          <el-form-item label="商品描述" prop="describe">
            <el-input
              v-model="dataForm.describe"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item label="详情" prop="details">
            <vue-ueditor-wrap
              v-model="dataForm.details"
              :config="contentConfig"
            />
          </el-form-item>
          <!--<el-form-item label="商品状态" prop="state">
                      <el-switch v-model="dataForm.state" :active-value="1" :inactive-value="0" disabled/>
                    </el-form-item>-->
          <el-form-item label="是否推荐" prop="hotFlag">
            <el-switch
              v-model="dataForm.hotFlag"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="发布时间" prop="pubilshTime">
            <el-date-picker
              v-model="dataForm.pubilshTime"
              type="datetime"
              placeholder="选择日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="dataForm.remark"
              auto-complete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          @click.native="closeDialog()"
        >取消</el-button>
        <el-button
          size="mini"
          :loading="editLoading"
          type="primary"
          @click.native="saveFormData()"
        >提交
        </el-button>
      </div>
    </el-dialog>

    <!--商品参数设置界面-->
    <!--    <el-dialog title="商品参数" width="60%" top="10vh" :visible.sync="goodsParamsDialogFormVisible"-->
    <!--               :close-on-click-modal="false">-->
    <!--      <goods-params v-if="goodsParamsDialogFormVisible" ref="goodsParams" :row-goods-id="rowGoodsId"-->
    <!--                    :row-classify-id="rowClassifyId" @paramsformcallback="paramsFormCallback"/>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button type="primary" style="margin-top: 20px" @click="saveGoodsParamsForm">保存参数信息</el-button>-->
    <!--        <el-button style="margin-top: 20px" @click="goodsParamsDialogFormVisible=false">关闭</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <!--商品规格设置界面-->
    <el-dialog
      title="商品规格"
      width="65%"
      top="10vh"
      :visible.sync="goodsAttrDialogFormVisible"
      :close-on-click-modal="false"
    >
      <goods-attr
        v-if="goodsAttrDialogFormVisible"
        ref="goodsAttr"
        :row-goods-id="rowGoodsId"
        :row-classify-id="rowClassifyId"
        :row-sku-attr="rowSkuAttr"
        @attrformcallback="attrFormCallback"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="margin-top: 20px"
          @click="saveAttrForm"
        >保存SKU</el-button>
        <el-button
          style="margin-top: 20px"
          @click="goodsAttrDialogFormVisible = false"
        >关闭</el-button>
      </div>
    </el-dialog>

    <!--商品库存设置界面-->
    <el-dialog
      title="商品库存"
      width="45%"
      top="10vh"
      :visible.sync="goodsStockDialogFormVisible"
      :close-on-click-modal="false"
    >
      <goods-stock
        v-if="goodsStockDialogFormVisible"
        ref="goodsStock"
        :row-goods-id="rowGoodsId"
        :row-classify-id="rowClassifyId"
        @stockformcallback="stockFormCallback"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="margin-top: 20px"
          @click="saveGoodsStockForm"
        >保存库存信息</el-button>
        <el-button
          style="margin-top: 20px"
          @click="goodsStockDialogFormVisible = false"
        >关闭</el-button>
      </div>
    </el-dialog>
    <!--评论列表-->
    <el-dialog
      title="评论列表"
      width="70%"
      top="5vh"
      :visible.sync="dialogFormVisibleComment"
      :close-on-click-modal="false"
    >
      <order-comment
        v-if="dialogFormVisibleComment"
        ref="orderComment"
        :row-id="rowGoodsId"
      />
    </el-dialog>
  </div>
</template>
<script>
import baseData from '@/mixin/base-data'
import address from '@/mixin/address'
import CmUpload from '@/components/Upload'
import CMUploadMore from '@/components/UploadMore/index'
import goodsAttr from './components/goodsAttr'
import goodsStock from './components/goodsStock'
import goodsParams from './components/goodsparams'
// import orderComment from '../../../views/order/orderComment/orderComment'
import { getFreightList } from '@/api/modules/support'
import orderComment from '@/views/goodsOrder/orderComment/orderComment'

import {
  getGoodsCount,
  getMGoodsSpuList,
  saveMGoodsSpuInfo,
  deleteMGoodsSpuInfo,
  getJdGoodsInfoList,
  updateNearbyGoodsState,
  queryItemListByGoodsIdAndStatus,
  getGoodsOrderList
} from '@/api/modules/goodsInfo'

export default {
  name: 'ProductBrand',
  components: { CmUpload, goodsAttr, goodsStock, goodsParams, CMUploadMore ,orderComment },
  directives: {},
  filters: {},
  mixins: [baseData, address],
  data() {
    return {
      contentConfig: {
        initialFrameWidth: '100%'
      },
      tableKey: 0,
      tableList: [], // 表格数据源
      tableTotal: 0, // 表格总条数数据
      goodsCount: 0,
      listLoading: true,
      pageRequest: { pageNum: 1, pageSize: 10, flag: 0 },
      searchParam: { SEARCH_LIKE_good_name: '' },
      dialogFormVisible: false, // 默认不显示弹出框
      goodsAttrDialogFormVisible: false, // 默认不显示弹出框
      goodsStockDialogFormVisible: false,
      goodsParamsDialogFormVisible: false,
      dialogFormVisibleComment: false,
      operation: true, // true:新增, false:编辑
      editLoading: false, // 保存表单时loading框
      feeTemplateList: [], // 运费模版数据源
      columns: [
        { prop: 'classifyName', label: '商品分类', sortable: false },
        {
          prop: 'goodName',
          label: '商品名称',
          sortable: false,
          width: '200px'
        },
        {
          prop: 'imgUrl',
          label: '图片路径',
          sortable: false,
          imgFlag: true
        },
        {
          prop: 'state',
          label: '商品状态',
          sortable: false,
          switchFlag: true
        },
        {
          prop: 'hotFlag',
          label: '是否推荐',
          sortable: false,
          switchFlag: true
        },
        { prop: 'pubilshTime', label: '发布时间', sortable: false },
        { prop: 'collectCount', label: '收藏数', sortable: false }
        // {prop: 'skuSales', label: '销量', sortable: false},
        // {prop: 'totalMoney', label: '支付金额', sortable: false}
      ],
      fileList: [],
      goodClass: [],
      goodBrand: [],
      // 新增编辑界面数据
      dataForm: {
        id: '',
        classifyId: '',
        classifyName: '',
        goodName: '',
        feeType: '',
        fee: '',
        feeFormworkId: '',
        code: '',
        imgUrl: '',
        imgArr: '',
        describe: '',
        details: '',
        state: '',
        hotFlag: '',
        readNum: '',
        pubilshTime: '',
        status: '',
        remark: '',
        ct: '',
        cb: '',
        et: '',
        eb: ''
      },
      // 表单检验规则
      dataFormRules: {
        id: [
          { required: true, message: '请输入主键id', trigger: 'blur' }
        ],
        classifyId: [
          {
            required: true,
            message: '请输入商品分类id',
            trigger: 'blur'
          }
        ],
        goodName: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入商品编码',
            trigger: 'blur'
          }
        ],
        imgUrl: [
          {
            required: true,
            message: '请输入图片路径',
            trigger: 'blur'
          }
        ],
        imgArr: [
          {
            required: true,
            message: '请输入图片轮播图',
            trigger: 'blur'
          }
        ],
        describe: [
          {
            required: true,
            message: '请输入商品描述',
            trigger: 'blur'
          }
        ],
        details: [
          { required: true, message: '请输入详情', trigger: 'blur' }
        ],
        // feeType: [{required: true, message: '请输入详情', trigger: 'blur'}],
        state: [
          {
            required: true,
            message: '请输入商品状态',
            trigger: 'blur'
          }
        ],
        hotFlag: [
          {
            required: true,
            message: '请输入是否热门',
            trigger: 'blur'
          }
        ],
        pubilshTime: [
          {
            required: true,
            message: '请输入发布时间',
            trigger: 'blur'
          }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      },
      rowId: '',
      brandProps: {
        multiple: false, // 是否多选
        label: 'label',
        value: 'id'
      },
      props: {
        multiple: false, // 是否多选
        label: 'name',
        value: 'id',
        children: 'children'
      },
      rowGoodsId: '',
      rowClassifyId: '',
      rowSkuAttr: ''
    }
  },
  created() {
    this.getList()
    this.getGoodsClasslist()
    this.getFreightList()
    this.getGoodsOrderList()
  },
  methods: {
    async getFreightList() {
      this.listLoading = true
      // 【API请求】----获取用户列表数据
      const res = await getFreightList()
      try {
        if (res.code === 0) {
          const freightContent = res.result.content
          this.feeTemplateList = freightContent
        }
        this.listLoading = false
      } catch (e) {
        this.listLoading = false
        throw e
      }
    },
    async getList() {
      this.listLoading = true
      // 【API请求】----获取用户列表数据
      const res = await getMGoodsSpuList(this.pageRequest)
      console.log(res)
      try {
        if (res.code === 0) {
          const r = await getGoodsCount(this.pageRequest)
          const content = res.result.content
          const total = res.result.total
          this.tableList = content
          this.tableTotal = total
          this.goodsCount = r.result.content
          console.log(this.goodsCount)
        }
        this.listLoading = false
      } catch (e) {
        this.listLoading = false
        throw e
      }
    },
    async getGoodsOrderList() {
      this.listLoading = true
      // 【API请求】----获取用户列表数据
      const res = await getGoodsOrderList(this.pageRequest)
      console.log(res)
      try {
        if (res.code === 0) {
          const r = await getGoodsCount(this.pageRequest)
          const goodsOrdercontent = r.result.content
          const goodsOrdertotal = r.result.total
          // this.tableList = goodsOrdercontent
          // this.tableTotal = goodsOrdertotal
          this.goodsCount = r.result.content
          console.log(this.goodsCount)
        }
        this.listLoading = false
      } catch (e) {
        this.listLoading = false
        throw e
      }
    },
    // 获取表格数据
    // 表格数据筛选
    handleFilter() {
      this.pageRequest.pageNum = 1
      this.pageRequest.pageSize = 10
      this.pageRequest.searchParam = this.searchParam
      this.getList()
    },
    handlePayMoney() {
      this.pageRequest.pageNum = 1
      this.pageRequest.pageSize = 10
      this.pageRequest.flag = 1
      this.getGoodsOrderList()
    },
    handleSales() {
      this.pageRequest.pageNum = 1
      this.pageRequest.pageSize = 10
      this.pageRequest.flag = 2
      this.getGoodsOrderList()
    },
    // 【按钮点击】--- 弹出新增表单
    handleCreate() {
      this.operation = true
      this.initDataForm()
      this.dialogFormVisible = true
      // 获取运费模版列表
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.editLoading = false
      })
    },
    // 【按钮点击】--- 弹出编辑表单
    handleUpdate(row) {
      this.operation = false
      this.dataForm = Object.assign({}, row)
      // 显示编辑菜单
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.editLoading = false
      })
    },
    // 【按钮点击】--- 弹出商品参数设置
    goodsParamsSet(row) {
      // 显示编辑菜单
      this.rowGoodsId = row.id
      this.rowClassifyId = row.classifyId
      this.goodsParamsDialogFormVisible = true
    },
    // 【按钮点击】--- 弹出商品规格设置
    goodsAttrSet(row) {
      console.log(row)
      // 显示编辑菜单
      this.rowGoodsId = row.id
      this.rowClassifyId = row.classifyId
      this.rowSkuAttr = row.updateUser
      this.goodsAttrDialogFormVisible = true
      console.log(this.rowGoodsId)
      console.log(this.rowClassifyId)
      console.log(this.rowSkuAttr)
    },
    // 【按钮点击】--- 弹出商品库存设置
    goodsStockSet(row) {
      // 显示编辑菜单
      this.rowGoodsId = row.id
      this.goodsStockDialogFormVisible = true
    },
    commentList(row) {
      this.rowGoodsId = row.id
      this.dialogFormVisibleComment = true
    },
    // 【按钮点击】--- 商品上下架
    async handleGoodsStateChange(index, row) {
      const state = row.state
      this.tableList[index].state = state === 0 ? 1 : 0
      let str = ''
      if (state === 0) {
        const res = await queryItemListByGoodsIdAndStatus({
          goodsId: row.id
        })
        if (res.code === 500) {
          str = res.msg + ','
        }
      }
      this.$confirm(
        state === 0 ? str + '确认下架商品吗？' : '确认上架商品吗？',
        '提示',
        {}
      )
        .then(async() => {
          // 【API请求】---- 删除数据
          const res = await updateNearbyGoodsState({
            id: row.id,
            state: state
          })
          try {
            if (res.code === 0) {
              this.getList()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              this.$message({ message: res.msg, type: 'error' })
            }
          } catch (e) {
            throw e
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 保存表单数据
    saveFormData() {
      let res
      this.$refs['dataForm'].validate(async valid => {
        if (!valid) {
          return false
        }
        this.editLoading = true
        res = await saveMGoodsSpuInfo(this.dataForm)
        try {
          if (res.code === 0) {
            this.dialogFormVisible = false // 关闭表单页面
            this.initDataForm() // 重置表单数据
            this.getList() // 重新获取表格数据
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          }
          this.editLoading = false // 关闭loading框
        } catch (e) {
          throw e
        }
      })
    },
    // 【按钮点击】---删除行
    handleDelete(row) {
      this.$confirm('确认删除该记录吗？', '提示', {})
        .then(async() => {
          // 【API请求】---- 删除数据
          const { id } = row
          const res = await deleteMGoodsSpuInfo({ ids: id })
          try {
            if (res.code === 0) {
              this.getList()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            }
          } catch (e) {
            throw e
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 初始化表单数据，重新渲染
    initDataForm() {
      Object.assign(this.$data.dataForm, this.$options.data().dataForm)
    },
    // 关闭表单弹出框
    closeDialog() {
      this.$refs['dataForm'].resetFields()
      this.dialogFormVisible = false
    },
    /**
         * 获取商品分类、品牌
         */
    async getGoodsClasslist() {
      const res_c = await getJdGoodsInfoList()
      console.log(res_c)
      console.log('classifyData', res_c.result.content)
      if (res_c.result.content != null) {
        this.goodClass = this.formatData(res_c.result.content)
      }
    },
    // 商品类型
    handleFilterChangeType(value) {
      console.log(value)
      this.dataForm.classifyId = value[value.length - 1]
      const classLabel = this.$refs['classCascader'].getCheckedNodes()[0]
        .pathLabels
      this.dataForm.classifyName = classLabel[classLabel.length - 1]
    },
    /* // 商品品牌
            brandHandleFilterChangeType(value) {
              console.log(value)
              this.dataForm.brandId = value[value.length - 1]
              const brandLabel = this.$refs['brandCascader'].getCheckedNodes()[0].pathLabels
              this.dataForm.brandName = brandLabel[brandLabel.length - 1]
            },*/
    // 【商品参数信息】---保存按钮
    saveGoodsParamsForm() {
      this.$refs.goodsParams.saveParamsForm()
    },
    // 【商品SKU信息】---保存按钮
    saveAttrForm() {
      this.$refs.goodsAttr.saveSkuFrom()
    },
    // 【商品库存信息】---保存按钮
    saveGoodsStockForm() {
      this.$refs.goodsStock.saveStockFrom()
    },
    // 保存商品参数信息----------回调
    paramsFormCallback() {
      // this.getList() // 重新获取表格数据
      this.$notify({
        title: '成功',
        message: '保存成功',
        type: 'success',
        duration: 2000
      })
      this.goodsParamsDialogFormVisible = false // 关闭表单页面
    },
    // 保存商品SKU信息----------回调
    attrFormCallback() {
      // this.getList() // 重新获取表格数据
      this.$notify({
        title: '成功',
        message: '保存成功',
        type: 'success',
        duration: 2000
      })
      this.goodsAttrDialogFormVisible = false // 关闭表单页面
    },
    // 保存商品库存信息----------回调
    stockFormCallback() {
      // this.getList() // 重新获取表格数据
      this.$notify({
        title: '成功',
        message: '保存成功',
        type: 'success',
        duration: 2000
      })
      this.goodsStockDialogFormVisible = false // 关闭表单页面
    },
    commentCallback() {
      // this.getList() // 重新获取表格数据
      this.$notify({
        title: '成功',
        message: '保存成功',
        type: 'success',
        duration: 2000
      })
      this.goodsStockDialogFormVisible = false // 关闭表单页面
    }
  }
}
</script>
<style lang="scss">
.tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}

/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: 6px;
}

/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 6px;
}

/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {
    display: block;
}

.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
    height: 21px;
    width: 52px !important; /*开关按钮的宽度大小*/
}
</style>
